﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="www.miendatweb.com" />
	<title>Tao slide anh voi jQuery Cycle</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
			$("#slide").cycle({ 
				fx:    'fade', //Hiệu ứng - Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html
				speed:  1000, //Tốc độ diễn ra hiệu ứng
				timeout: 3000, //3 giây: Thời gian thay đổi giữa các hình 1/1000 giây
				pager:  '#slide-nav' //Tạo phân trang cho <div id="slide-nav"></div>
			});
		});
    </script>
</head>
<body>
<div id="wrapper">
    <div id="slide">
        <img src="imgs/1.jpg" alt="Picture 1" />
        <img src="imgs/2.jpg" alt="Picture 2" />
        <img src="imgs/3.jpg" alt="Picture 3" />
        <img src="imgs/4.jpg" alt="Picture 4" />
        <img src="imgs/5.jpg" alt="Picture 5" />
    </div>
	<div id="slide-nav"></div>
	<div class="info">
		<h4>Tạo Slideshow với jQuery Cycle & CSS</h4>
		<p><a href="http://www.miendatweb.com">http://www.miendatweb.com</a></p>
		<p>CSS and jQuery code demo by: Miền Đất Web</p>
	</div>
</div>
</body>
</html>